<template>
  <div class="main-content">
    <main-content-header :path="2"/>
    <template v-if="$store.state.contentBars.length">
      <main-content-bar
          v-for="item in $store.state.contentBars"
          :key="item.id"
          :code="item.code"
          :barName="item.name"
          :info="item.info"
          :pageConfig="pageConfig"
          :route="route"
          :class="{ MCBfirst: item.id === $store.state.contentBars.length - 1 }"
      />
    </template>
    <template v-else>
      <main-content-empty :route="route"/>
    </template>
  </div>
</template>

<script>
import MainContentBar from "@/components/MainContentBar";
import MainContentHeader from "@/components/MainContentHeader";
import MainContentEmpty from "@/components/MainContentEmpty";

export default {
  props: ["route", "pageConfig"],
  components: {
    MainContentBar,
    MainContentHeader,
    MainContentEmpty,
  },
};
</script>

<style lang="scss" scoped>
.MCBfirst {
  margin-top: 5%;
}
</style>
